<template>
  <div class="change-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title" >换货申请</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="group flex flex-pack-justify" @click="selectAddress">
      <span>{{address}}</span>
      <span class="icon icon-arrowright"></span>
    </div>
    <div class="group flex flex-pack-justify">
      <span>换货原因</span>
      <span class="color-black">质量问题</span>
    </div>
    <div class="group">
      <p>说明</p>
      <textarea class="explain border-1px" v-model="form.description" placeholder="输入换货的商品名称、条码、数量"></textarea>
    </div>
    <div class="btn btn1 sub" @click="sub">提交换货申请</div>
    <mt-popup class="address-popup" v-model="addrList.visible" popup-transition="popup-fade" modal="true" position="bottom">
      <mt-picker ref="picker" :itemHeight="addrList.itemHeight"  :valueKey="addrList.valueKey" :slots="addrList.data" @change="addressChange" ></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
        address: '',
        form:{
          addressId: '',
          description: '',
          type: 1
        },
        addrList: {
          visible: false,
          itemHeight: 36,
          valueKey: 'address',
          data: [
            {
              values: [
                {address: '换货地址', id: 0}
              ],
              className: 'slot1'
            }
          ]
        }
      };
    },
    methods: {
      addressChange(picker, values){
        this.form.addressId = picker.getValues()[0].id;
        this.address = picker.getValues()[0].address;
      },
      //获取地址列表
      addressList(){
        getAddressList().then(data=>{
          if(data.returnCode == '000000'){
            let list = [];
            [].forEach.call(data.result.buyerAddressList, item=>{
                list.push({id: item.id, address:item.provinceName + item.cityName +  item.address});
            });
            this.addrList.data = [
              {
                values: list,
                className: 'slot1'
              }
            ]
          }
        });
      },
      selectAddress(){
        this.addrList.visible = !this.addrList.visible;
      },
      sub(){
        applyChangeGoods(this.form).then(data=>{
            if(data.returnCode == '000000'){
              this.$router.push({name: 'changeList'});
            }
        });
      }
    },
    filters: {},
    created() {
      this.addrList.itemHeight = this.addrList.itemHeight * window.devicePixelRatio;
      this.addressList();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./change.less";
</style>
